<template>
  <div class="car-alarm-wrapper d-flex jc-around ai-center">
    <div class="img-box d-flex jc-between ai-center">
      <MyImage
        class="img-wrapper"
        :class="{ language, isalive: cardInfo.alive_type == 1 }"
        width="120px"
        height="120px"
        :src="cardInfo.snap_path"
      />
      <MyImage width="120px" height="120px" :src="cardInfo.img_path" />
      <div class="img-similarity" :class="['lib_type' + cardInfo.lib_type]">
        {{ cardInfo.similarity }}%
      </div>
    </div>
    <div class="content flex-1 d-flex flex-column jc-center ai-start ml-20">
      <div class="mb-20">
        {{ $t("face_nameTag") }}:{{ cardInfo.person_name }}
      </div>
      <div class="mb-20">{{ $t("onLibrary") }}:{{ cardInfo.lib_name }}</div>
      <div class="mb-20">
        {{ $t("assoc_channelName") }}:{{ cardInfo.camera_name }}
      </div>
      <div>{{ cardInfo.trigger }}</div>
    </div>
    <div class="alarm-info" :class="['lib_type' + cardInfo.lib_type]">
      <span>{{ cardInfo.lib_type | formatLibType }}</span>
      <span class="ml-20" v-if="!!cardInfo.event_type">{{
        cardInfo.event_type | formatEventType
      }}</span>
      <span class="ml-20" v-if="!!cardInfo.events_type">{{
        cardInfo.events_type | formatEventsType
      }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cardInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    language() {
      return this.$store.state.language;
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.car-alarm-wrapper {
  height: 148px;
  position: relative;
  .img-box {
    position: relative;
    width: 246px;
    .img-similarity {
      background-color: rgba(240, 79, 86, 1);
      border-radius: 13px;
      height: 26px;
      width: 52px;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      text-align: center;
      line-height: 26px;
      color: #fff;
      &.lib_type2 {
        background-color: #78d57d;
      }
      &.lib_type0 {
        background-color: #6d68d3;
      }
    }
    .img-wrapper {
      position: relative;
    }
    .isalive.zh-CN::after {
      content: "\975E\6D3B\4F53";
    }
    .isalive.zh-TW::after {
      content: "\975E\6D3B\9AD4";
    }
    .isalive.en-US::after {
      content: "non-living body";
    }
    .isalive:after {
      border: 2px solid rgba(255, 0, 0, 0.767);
      border-radius: 2px;
      color: rgba(247, 45, 10, 0.87);
      font-size: 14px;
      font-weight: bold;
      line-height: 1;
      opacity: 0.5;
      position: absolute;
      padding: 5px;
      display: inline-block;
      left: 50%;
      top: 70%;
      transform: translate(-50%, -50%) rotate(-5deg) scale(1.1);
    }
  }
  .content {
    height: 100%;
  }
  .alarm-info {
    position: absolute;
    text-align: center;
    line-height: 29px;
    color: #fff;
    right: 10px;
    top: 10px;
    box-shadow: 0px 6px 12px 0px rgba(255, 136, 0, 0.101961);
    background-color: rgba(255, 136, 0, 1);
    border-radius: 0px 10px 0px 0px;
    height: 29px;
    min-width: 114px;
    padding:0 10px;
    &.lib_type2 {
      background-color: #78d57d;
    }
    &.lib_type0 {
      background-color: #6d68d3;
    }
  }
}
</style>
